<script setup>
import { ref } from "vue";
const option = ref({
  title: {
    //图表的标题 样式
    text: "周销售额趋势",
    style: {
      fill: "#fff",
      fontSize: 16,
    },
  },
  xAxis: {
    //X坐标轴
    name: "第一周", //名称
    data: ["1月", "2月", "周三", "周四", "周五", "周六", "周日"],
    axisLabel: {
      //标签的样式
      style: {
        fill: "#fff",
      },
    },
    axisLine: {
      //坐标轴配置
      style: {
        stroke: "#fff", //坐标轴线的颜色
      },
    },
    axisTick: {
      //刻度线配置
      style: {
        stroke: "#fff",
      },
    },
  },
  yAxis: {
    name: "销售额",
    data: "value",
    axisLabel: {
      //标签的样式
      style: {
        fill: "#fff",
      },
    },
    axisLine: {
      //坐标轴配置
      style: {
        stroke: "#fff", //坐标轴线的颜色
      },
    },
    splitLine: {
      //坐标轴分割线的配置
      show: false, //隐藏
    },
  },
  grid: {
    //用来设置图表的网格区域,  可以设置上下左右边距
    top: "35px",
    left: "15px",
    right: "15px",
    bottom: "10px",
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: "line",
      smooth: true, //平滑曲线
    },
  ],
});
</script>

<template>
  <dv-border-box11 class="box" title="办结统计" :title-width="400" :animate="false" style="width: 100%; height: 330px">
    <dv-charts :option="option" style="width: 100%; height: 330px" />
  </dv-border-box11>
</template>

<style scoped></style>
